
<style>
	#table-votelist th:nth-child(1) {
		min-width: 80px;
	}
	#table-votelist th:nth-child(2) {
		min-width: 60px;
	}
	#table-votelist th:nth-child(3) {
		min-width: 135px;
	}
</style>

<div id="main-wrapper">
	<h1>
			<i class="glyphicon glyphicon-list-alt"></i>投票管理
	</h1>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs">
		<li>
			<a class="ex-link" href="#tab-list" data-toggle="tab">投票列表</a>
		</li>
		<li>
			<a class="ex-link" href="#tab-add" data-toggle="tab">添加投票</a>
		</li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
		<div class="tab-pane active" id="tab-list">
			<table id="table-votelist" class="table table-striped">
				<thead>
				<tr>
					<th class="long">问题</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
                    <script type="text/html" id= "tr-tmpl">
                        <tr>
                            <td><%- content %></td>
                            <td><%- state %></td>
                            <td>
                                <a href="#/viewvote?vid=<%- vid %>">详情</a>
                                &nbsp;&nbsp;
                                <% if (state === '开启') { %>
                                    <a data-vid="<%- vid %>" class="ex-link offvote">关闭</a>
                                <% } else { %>
                                    <a data-vid="<%- vid %>" class="ex-link onvote">开启</a>
                                <% } %>
                                &nbsp;&nbsp;
                                <a data-vid="<%- vid %>" class="ex-link delvote">删除</a>
                            </td>
                        </tr>
                    </script>
				</tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <script type="text/html" id="pagin-tmpl">
                                <ul class="pagination">
                                    <li>
                                        <a onclick="updateVoteList(1)">&laquo;</a>
                                    </li>
                                    <% if (current > 2) { %>
                                    <li class="disabled">
                                        <a>..</a>
                                    </li>
                                    <% } %>
                                    <% if (prev) { %>
                                    <li>
                                        <a onclick="updateVoteList(<%- prev %>)"><%- prev %></a>
                                    </li>
                                    <% } %>
                                    <li class="active">
                                        <a onclick="updateVoteList(<%- current %>)"><%- current %></a>
                                    </li>
                                    <% if (next) { %>
                                    <li>
                                        <a onclick="updateVoteList(<%- next %>)"><%- next %></a>
                                    </li>
                                    <% } %>
                                    <% if (current < (count - 1)) { %>
                                    <li class="disabled">
                                        <a>..</a>
                                    </li>
                                    <% } %>
                                    <li>
                                        <a onclick="updateVoteList(<%- count %>)">&raquo;</a>
                                    </li>
                                </ul>
                            </script>
                        </td>
                    </tr>
                </tfoot>
			</table>
		</div>
		<div class="tab-pane" id="tab-add">
			<form id="form-add">
				<div class="form-group">
					<textarea class="form-control" rows="3" name="content" placeholder="投票内容"></textarea>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="words[]" placeholder="选项1">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="words[]" placeholder="选项2">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="words[]" placeholder="选项3">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="words[]" placeholder="选项4">
				</div>

				<button type="submit" class="btn btn-primary btn-lg btn-block">
					添加投票
				</button>
			</form>
		</div>
	</div>
</div>

<script>
	var $tableList = $('#table-votelist'),
		$tbody = $tableList.find('tbody'),
		$formAdd = $('#form-add'),
        trTmpl = _.template($tbody.find('#tr-tmpl').html()),
        $paginTmpl = $tableList.find('#pagin-tmpl'),
        paginTmpl = _.template($paginTmpl.html());

	$('.nav-tabs a').click(function(ev){
		ev.preventDefault();
		updateVoteList(1);
		$(this).tab('show');
	}).first().tab('show');

	$formAdd.ajaxForm({
		type: 'post',
		url: '/do/s/addvote',
		success: function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		}
	});

	$tbody.delegate('a.delvote', 'click', function(ev){
		var $a = $(this),
			vid = parseInt($a.attr('data-vid'));
		$.get('/do/s/delvote?vid=' + vid, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		});
	}).delegate('a.onvote', 'click', function(ev){
		var $a = $(this),
			vid = parseInt($a.attr('data-vid'));
		$.get('/do/s/setvote?state=active&vid=' + vid, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		});
	}).delegate('a.offvote', 'click', function(ev){
		var $a = $(this),
			vid = parseInt($a.attr('data-vid'));
		$.get('/do/s/setvote?state=cool&vid=' + vid, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		});
	});

	updateVoteList(1);

	function updateVoteList(page) {
		$.get('/do/s/votelist',{
            page: page
        }, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
            msg && notify(msg, ok);
			if (! ok) return;
			var total = resObj['total'],
                voteList = resObj['voteList'];
			if (! voteList.length) {
				return $tbody.html([
					'<tr class="text-center">',
						'<td colspan="3">没有记录</td>',
					'</tr>'
				].join(''));
			}
			$tbody.html(_.reduce(voteList, function(memo, vote){
                return memo + trTmpl({
                    vid:vote.id,
                    content: vote.content,
                    state: vote['state'] === 'active' ? '开启' : '关闭'
                });
			}, ''));
            // pagination
            var count = Math.ceil(total / pageSize);
            $paginTmpl.next().remove();
            $paginTmpl.after(paginTmpl({
                current: page,
                prev: page > 1 ? page - 1 : null,
                next: page < count ? page + 1 : null,
                count: count
            }));
		});
	}
</script>


